@if (content) {
  <div class="card-1v5 rounded-md transition-all duration-300 ease-in-out hover:-translate-y-3">
    <div class="card-inner p-5 flex flex-col">
      <div [contentedit]="'title'" class="title mat-h2" [innerHTML]="content.title"></div>
      <div [contentedit]="'body'" class="content opacity-70" [innerHTML]="content.body"></div>
      @if (content.more) {
        <div class="more flex justify-start items-center my-5">
          <app-link [attr.data-path]="'more'" [content]="content.more" />
          <app-icon [content]="{ svg: 'chevron-right' }" />
        </div>
      }
      <div class="footer flex justify-between items-center mat-headline-3 m-bottom-0 opacity-20">
        <div class="left" [contentedit]="'footer.label'" [innerHTML]="content.footer.label"></div>
        <app-icon [content]="content.footer.icon" />
      </div>
    </div>
  </div>
}
